<!-- 购物车页面 -->
<template>
  <view class="cart_box" v-if="cartArr.length!==0">
    <!-- 地址栏区域 -->
    <my_address></my_address>
    <!-- 购物车标题区域 -->
    <view class="cart_title_view">
      <uni-icons type="shop" size="22"></uni-icons>
      <text>购物车</text>
    </view>
    <!-- 购物车商品展示区域 -->
    <!-- uni-swipe-action 是最外层包裹性质的容器 -->
    <uni-swipe-action>
      <!-- 每个商品项 -->
      <view class="cart_item" v-for="item in cartArr" :key="item.goods_id">
      <!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
        <uni-swipe-action-item :right-options="options" @click="cartDel(item)">
        <!-- 公用组件渲染 -->
          <my_goods 
            :item="item" 
            :showRadio='true' 
            @radio-chang="switchRid"
            @goods-count="changCount">
          </my_goods>
        </uni-swipe-action-item>
      </view>
    </uni-swipe-action>
    <!-- 公共组件，结算区域 -->
    <my_settle></my_settle>  
  </view>
  <!-- 清空购物车是的显示区域 -->
  <view class="empty-cart" v-else>
      <image src="/static/cart_empty@2x.jpg" class="empty-img"></image>
      <text class="tip-text">空空如也~</text>
    </view>
</template>

<script>
 import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        cartArr:[],
        options: [{
          text: '删除', // 显示的文本内容
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }]
      }
    },
    computed: {
        // 将 Cart 模块中的 toCart 映射为当前页面的计算属性
        ...mapGetters('Cart', ['toCart']),
      },
    onShow() {
      this.showTab()
    },
    onLoad() {
      this.cartArr = this.$store.state.Cart.cart
    },
    watch:{
      // 侦听vuex中的商品总数量
      toCart:{
        handler() {
          this.showTab()
        },
        immediate:true
      }
    },
    methods: {
      // 设置TabBar底部栏徽标显示
      showTab() {
        // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
        // 徽标在购物车有数据的情况下才显示
        uni.setTabBarBadge({
          index: 2, // 索引
          text: `${this.toCart}` // 注意：text 的值必须是字符串，不能是数字
        })
        if(this.$store.state.Cart.cart.length === 0) {
          uni.removeTabBarBadge({
            index: 2
          })
          return
        }
      },
      // 子组件通知，修改单选框状态，
      switchRid(e){
        // 修改vuex里的购物车数据 
        this.cartArr.forEach(item =>{
          if(e.goods_id === item.goods_id){
            item.goods_state = e.goods_state
          }
        })
        // 修改完在持久化到本地
        this.$store.commit('Cart/saveToStorage')
      },
      // 子组件修改数量时触发
      changCount(e) {
        this.cartArr.forEach(item => {
          if(e.id === item.goods_id) {
            item.goods_count = e.count
          }
        })
        this.$store.commit('Cart/saveToStorage')
      },
      cartDel(item) {
        this.$store.commit('Cart/clickCartDel',item.goods_id)
        // 删完本地后，重新给渲染的数组赋值
        this.cartArr = this.$store.state.Cart.cart
      }
    }
  }
</script>

<style lang="scss">
.cart_box {
  padding-bottom: 50px;
  .cart_title_view {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #efefef;
    
    text {
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .cart_item {
    padding-left: 5px;
  }
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;

  .empty-img {
    width: 80px;
    height: 70px;
  }

  .tip-text {
    font-size: 12px;
    color: gray;
    margin-top: 15px;
  }
}
</style>
